<template>
    <div style="padding: 20px">
        <el-form :model="loginForm" label-width="120" class="demo-ruleForm">
            <el-form-item prop="name">
                <el-input v-model="loginForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;">
                <el-button type="primary" @click="submitForm()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginForm: {
                    name: 'admin',
                    password: '12345678'
                },
            };
        },
        methods: {
            submitForm() {
                this.$http.post('login', this.loginForm).then(
                    response => {
                        if (response.code === 20000) {
                            this.$message({
                                message: response.message,
                                type: 'success'
                            });

                            this.$localStorage.set('adminName', this.loginForm.name);
                            this.$router.push({ name: '/' });
                        }
                    }
                );
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-form {
        width: 50%;
        margin: auto;
        padding: 45px;
        height: 450px;
        background-color: #fff;
        // 绝对定位
        position:absolute;
        top:16%;
        left:25%;
    }
</style>